<template>
    <van-nav-bar title="客服" left-text="" left-arrow @click-left="goBack" @click-right="isShare = true">
    </van-nav-bar>
    <div id="app">
        <div class="chat-window">
            <div class="message" v-for="message in messages" :key="message.id">
                <div class="message-content" :class="{ 'bot-message': message.isBot }">
                    {{ message.content }}
                </div>
            </div>
        </div>
        <form @submit.prevent="sendMessage">
            <input type="text" v-model="userText" placeholder="请输入内容" />
            <button type="submit">发送</button>
        </form>
    </div>

</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            userText: '',
            messages: [],
        };
    },
    methods: {
        async sendMessage() {
            if (this.userText) {
                try {
                    // 发送消息到机器人
                    const response = await axios.post('https://api.qingyunke.com/api.php', {
                        key: 'free',
                        appid: 0,
                        msg: this.userText,
                    });
                    // 接收机器人回复
                    const botResponse = response.data.content;
                    this.messages.push({ id: Date.now(), content: botResponse, from: 'bot' });
                    this.userText = '';
                } catch (error) {
                    console.error('发送消息失败:', error);
                }
            }
        },
    },
};
</script>

<script setup>
const { proxy } = getCurrentInstance()
const goBack = () => {
    proxy.$router.go(-1)
}
const getProductInfoData = async () => {
    let result = await Api.ProductInfo({
        proid: proid.value,
        busid: LoginUser.id ?? 0
    })
}
</script>

<style scoped>
.chat-window {
    margin-top: 10px;
    margin-left: 10px;
    height: 500px;
    overflow-y: scroll;
    border: 1px solid #000000;
    border-radius: 5px;
    padding: 10px;
}

.message {
    margin-bottom: 20px;
}

.message-content {
    border-radius: 5px;
    padding: 10px;
    max-width: 80%;
    display: inline-block;
}

.bot-message {
    background-color: #e6e6e6;
}

.user-message {
    background-color: #b9f2a8;
}

form {
    display: flex;
    margin-top: 10px;
}

input {
    flex: 1;
    padding: 10px;
    margin-left: 10px;
    border: 1px solid #4d4c4c;
    border-radius: 5px;
}

button {
    padding: 10px;
    border: none;
    background-color: #5cb85c;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}
</style>
